<template>
  <div class="container">
    <div class="row mt-3">
      <div class="col-md-12">
        <h2 class="text-primary">
          <span>D3 Learning and Test</span>
        </h2>
      </div>
    </div>
    <div class="row mt-5 mb-5" id="search_app">
      <div class="col-md-9 offset-md-2">
        <div class="form-inline">
          <input type="text" class="form-control"
                 placeholder="please input the Chinese city name"
                 style="width: 70%;height: 50px;font-size: 18px"
                 v-model="cityName">
          <button class="btn btn-primary" style="width:100px;height: 50px" v-on:click="updateGraph">Search</button>
        </div>
      </div>
    </div>
    <div class="row mt-5 border rounded shadow-sm">
      <div class="col-md-12" style="padding-top: 10px; background-color: #dee2e6">
        <h3>
          <span>Graph</span>
        </h3>
      </div>
      <div class="col-md-12" id="showingLocation">
        <div class="col-md-3 border border-dark bg-light" style="z-index: 100;position: absolute; right: 5px; top: 5px"
             v-if="isShow">
          <h5 class="text-center">{{nodeName}}</h5>
          <p><b>Type:</b> {{nodeType}}</p>
          <p><a href='#'>More details...</a></p>
        </div>
        <svg>1111</svg>
      </div>
    </div>
  </div>
</template>

<script>
import graph from '../../assets/D3-learning/data-joining'

window.nodeInfo = { name: '', type: '' }

let nodes = [
  { id: 'China', name: 'China', type: 'nation' },
  { id: 'Shanghai', name: 'Shanghai', type: 'city' }
]

let edges = [{ source: 'Shanghai', target: 'China', relation: 'in' }]

const configs = { height: 500 }

export default {
  name: 'D3Test',
  data () {
    return {
      nodeInfo: window.nodeInfo,
      cityName: '',
      nodeName: '',
      nodeType: '',
      isShow: false
    }
  },
  methods: {
    updateGraph () {
      const newNode = { id: `${this.cityName}`, name: `${this.cityName}`, type: 'city' }
      const newEdge = { source: `${this.cityName}`, target: 'China', relation: 'in' }
      nodes.push(newNode)
      edges.push(newEdge)
      graph.GenerateGraph(nodes, edges, configs)
    }
  },
  watch: {
    nodeInfo: {
      handler (newValue) {
        this.nodeName = newValue.name
        this.nodeType = newValue.type
        this.isShow = true
      },
      deep: true
    }
  }
}
</script>

<style scoped>

</style>
